<template>
  <div class="homePage">
    <div class="left-box">
      <div class="baseInfo">
        <el-skeleton
          style="--el-skeleton-circle-size: 100px"
          animated
          :loading="loading"
        >
          <template #template>
            <div style="display: flex">
              <el-skeleton-item
                variant="image"
                style="width: 240px; height: 240px"
              />
              <div style="flex: 1; margin-left: 20px">
                <el-skeleton-item variant="p" style="width: 50%" />
                <el-skeleton-item
                  variant="p"
                  style="width: 60%; margin-top: 20px"
                />
                <el-skeleton-item
                  variant="p"
                  style="width: 100%; margin-top: 20px"
                />
                <el-skeleton-item
                  variant="p"
                  style="width: 100%; margin-top: 20px"
                />
                <el-skeleton-item
                  variant="p"
                  style="width: 100%; margin-top: 20px"
                />
                <el-skeleton-item
                  variant="p"
                  style="width: 100%; margin-top: 20px"
                />
              </div>
            </div>
          </template>
          <template #default>
            <div class="img">
              <img src="./2052550.jpg" alt="" />
            </div>
            <div class="info">
              <div class="info-item" v-for="(item, ind) in userForm" :key="ind">
                <span class="info-label">{{ item.label }}</span
                >：
                <span class="info-value">{{ userInfo[item.prop] }}</span>
              </div>
            </div>
          </template>
        </el-skeleton>
      </div>
      <div class="desc">
        <div class="desc-title">个人简介</div>
        <el-skeleton
          style="--el-skeleton-circle-size: 100px"
          animated
          :row="5"
          :loading="loading"
        >
          <template #default>
            <div class="desc-content">
              {{ userInfo.desc }}
            </div>
          </template>
        </el-skeleton>
      </div>
      <div class="desc">
        <div class="desc-title">爱好</div>
        <el-skeleton
          style="--el-skeleton-circle-size: 100px"
          animated
          :row="5"
          :loading="loading"
        >
          <template #default>
            <div class="desc-content">
              {{ userInfo.love }}
            </div>
          </template>
        </el-skeleton>
      </div>
    </div>
    <div class="hr"></div>
    <div class="right-box">
      <div class="time">
        {{ nowDate }}
      </div>
      <el-calendar v-model="value" />
      <div class="he-plugin-standard" id="he-plugin-standard"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { usersStore } from "@/store/users";
import moment from "moment";
// import { getUserInfo } from "@/api/login";

const userInfo = ref({
  email: "",
  userName: "",
  age: "",
  marry: "",
  education: "",
  address: "",
  desc: "",
  love: "",
  phone: "",
});

const userForm = ref([
  {
    label: "姓名",
    prop: "userName",
  },
  {
    label: "手机号",
    prop: "phone",
  },
  {
    label: "婚姻",
    prop: "marry",
  },
  {
    label: "学历",
    prop: "education",
  },
  {
    label: "地 址",
    prop: "address",
  },
]);
const store = usersStore();
const loading = ref(true);
const value = ref(new Date());
const nowDate = ref(moment(new Date()).format("YYYY-MM-DD HH:mm:ss"));
setInterval(() => {
  nowDate.value = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
}, 1000);

onMounted(async () => {
  loading.value = true;
  // const res = await getUserInfo();

  setTimeout(() => {
    userInfo.value = store.userInfo;
    loading.value = false;
  }, 300);

  window.WIDGET = {
    CONFIG: {
      layout: "1",
      width: "880",
      height: "150",
      background: "1",
      dataColor: "FFFFFF",
      key: "53db760ada6345af98978c0b44f86044",
    },
  };
  const script = document.createElement("script");
  script.type = "text/javascript";
  script.src =
    "https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0";
  document.getElementsByTagName("head")[0].appendChild(script);
});
</script>

<style lang="stylus" scoped>
.homePage
 background-color: #fff
 height: 100%
 display: flex
 padding: 20px 0
 overflow: hidden
 .hr
     width 1px
     height 100%
     background-color: #ccc
  .left-box
     flex: 1
     padding 0 20px
     box-sizing: border-box
     .baseInfo
        display: flex
        .img
           width 250px
           height 260px
           img
              width 100%
              height: 100%
        .info
           line-height: 56px
           margin-left: 50px
           display: flex
           flex-direction: column
           width 100%
           .info-item
              font-size: 20px
              flex: 1
              display: flex
              .info-label
                 display: inline-block
                 width 100px
                 text-align-last:justify;
              .info-value
                 text-align: left
                 flex: 1

      .desc
         margin-top: 30px
         .desc-title
            text-align: left
            font-size: 28px
            margin-bottom: 20px
         .desc-content
            text-align: left
            text-indent: 50px
            font-size: 18px
            line-height: 40px
  .right-box
     flex: 1
     .time
        text-align: center
        font-size: 30px
      :deep(.el-calendar)
        .el-calendar__body
            padding: 12px 20px 15px
      :deep(#he-plugin-standard)
        margin-left: 20px
        .wv-lt-refresh
          display: none
</style>
